<template>
	<Row style="border-radius:10px;" class="paper-hand">
		<Col span="12">
			<Card id="allQ" dis-hover>
				<div slot="title">
					<p>所有题目({{totalCount}})</p>
					<div style="float:right;margin-top: -26px;display: flex;justify-content: flex-end;width: 80%;">
						<Select filterable v-model="questionType" style="width:150px;margin-left:15px" @on-change="queryQuestionList">
							<Option value="object" :key="1">客观题</Option>
							<Option value="ctf" :key="2">CTF题</Option>
							<Option value="ctf1" :key="3" v-if="!isSelfTest">问答题</Option>
						</Select>
						<Select filterable placeholder="题目类型" v-model="queryObjectInfo.modeCode" clearable style="width:150px;margin-left:15px" @on-change="queryObjectInfo.pageIndex = 1 ;queryObjectList()" v-if="questionType == 'object'">
							<Option :value="1">单选</Option>
							<Option :value="2">多选</Option>
							<Option :value="3">判断</Option>
							<Option :value="4">填空</Option>
							<!--<Option :value="5">简答</Option>-->
						</Select>
						<Cascader :data="treeExpClassify" v-model="queryObjectInfo.typeCode" placeholder="知识点" @on-change="changeCascader" 
				            style="width:150px;display: inline-block;margin-left:15px" change-on-select v-if="questionType == 'object'"></Cascader>
						<Select filterable clearable placeholder="难易" v-model="queryObjectInfo.difficulty" style="width:150px;margin-left:15px" @on-change="queryObjectInfo.pageIndex = 1;queryObjectList()" v-if="questionType == 'object'">
							<Option value="simple">简单</Option>
							<Option value="medium">中等</Option>
							<Option value="hard">较难</Option>
						</Select>
						<Select filterable v-model="queryCtfInfo.category" clearable style="width:150px;margin-left:15px" placeholder="选择类型" 
							@on-change="query.pageIndex = 1;queryCtfList()" v-if="['ctf', 'ctf1'].includes(questionType)">
							<Option :value="category.dictname" v-for="category in questionTypeList" :key="category.dictname" :title="category.dictname">{{category.dictname}}</Option>
						</Select>
						<Select filterable v-model="queryCtfInfo.needEnv" style="width:150px;margin-left:15px" placeholder="需要环境" clearable
							@on-change="changeNeedEnv" v-if="['ctf'].includes(questionType) && isAdvancedExam === 'true'">
							<Option value='true'>需要环境</Option>
							<Option value='false'>不需要环境</Option>
						</Select>
					</div>
				</div>
				<div class="questionList" style="font-size:13px">
					<Input clearable placeholder="题目名称" v-model.trim="queryObjectInfo.description" @on-change="queryObjectInfo.pageIndex = 1;queryObjectList()" v-if="questionType == 'object'" style="width:180px;margin-bottom:10px;" />
					<Input clearable placeholder="题目名称" v-model.trim="queryCtfInfo.name" @on-change="query.pageIndex = 1;queryCtfList()" v-if="['ctf', 'ctf1'].includes(questionType)" style="width:180px;margin-bottom:10px;" />
					<div style="text-align:center" v-if="showQuestionList.length == 0">暂无数据</div>
					<QuestionList 
						:data="showQuestionList" 
						:showChecked="true" 
						@on-select="selectQuestion">
					</QuestionList>
					<div class="more" @click="loadMore" v-show="totalCount > showQuestionList.length">加载更多...</div>
				</div>
			</Card>
		</Col>
		<Col span="12">
		<Card dis-hover id="selQ">
			<div slot="title">
				<p style="display: flex;justify-content: space-between;">
					<span>已选题目 ({{copySelectQuestionList.length}})</span>
					<span style="color:red">题目添加上限100</span>
					<span>
						<span v-if="copySelectQuestionList.length" @click="clearSelectQuestion" class="clear">
	            			清空
						</span>
						<span style="margin-left:20px;">总分  <span style="color: #2D8CF0;"><b>{{totalScore}}</b></span></span>
					</span>
				</p>
			</div>
			<Input v-if="copySelectQuestionList.length" clearable placeholder="题目名称" v-model.trim="selectQuestionName" style="width:180px;margin-bottom:10px;" />
			<QuestionList :data="filterSelectQuestion(copySelectQuestionList)" :showActions="true">
				<template slot="action" slot-scope="{ question,index }">
					<Tooltip content="上移" placement="bottom" @click.native="upQuestion(question,index,'hand')">
						<span class="up"></span>
					</Tooltip>
					<Tooltip content="下移" placement="bottom" @click.native="downQuestion(question,index,'hand')">
						<span class="down"></span>
					</Tooltip>
					<Tooltip content="删除" placement="bottom" @click.native="removeQuestion(question,index)">
						<span class="remove"></span>
					</Tooltip>
					<InputNumber v-model="question.score" :max="1000" :min="1" size="small" placeholder="分值" style="width:70px" @on-change="changeScore($event,question)" />
				</template>
			</QuestionList>
		</Card>
		</Col>
	</Row>
</template>
<script>
	//import Cookies from 'js-cookie';
	import usally from '@/mixin/usally'
	import {
		queryTestPaperQuestionList
	} from '@/api/testpaper'
	import {
		queryObjectiveListNoGEQuesPage,
		queryCtfList
	} from '@/api/question'
	import {
		allDirection,
		experType
	} from '@/api/dict'
	import encryption from '@/libs/encryption.js'
	import {
		debounce
	} from '@/libs/utils'
	import QuestionList from '@/components/question-list'
	import common from './mixin'
	export default {
		name: 'PaperManuallyGeneration',
		components: {
			QuestionList
		},
		mixins: [usally,common],
		props:{
			isAdvancedExam: {
				type: String,
				default: 'false'
			},
			isSelfTest: {
				type: Boolean,
				default: false
			},
			'paperVisibility':{
				type:String,
				default:'share'
			},
			'paperCreator':{
				type:String,
				required:true,
				default:''
			},
			'isOwn':{
				type: Boolean,
				default:false
			},
			'selectQuestionList':{
				type: Array,
				default: function () {
			        return []
			    }
			}
		},
		data() {
			const validateName = (rule, value, callback) => { //验证只能填入数字
				var reg = new RegExp("^[\u4E00-\u9FA5a-zA-Z0-9_-]*$");
				//验证警戒值
				if(value) {
					if(!reg.test(value)) {
						callback(new Error('请输入中文、数字、字母、下划线、-'));
					} else {
						callback()
					}
				} else {
					callback()
				}
			}
			let September = sessionStorage.getItem('November')
			September = JSON.parse(encryption.SelfUseDecrypt(September))
			return {
				questionTypeList: [], // 题目类型
				USER_ID: September.userId,
				USER_Name: September.nickname,
				query: {
					pageIndex: 1,
					pageSize: 10,
				},
				queryCtfInfo: {
					category: '',
					needEnv: this.isAdvancedExam === 'true' ? '' : 'false',
					flagType: "0",
					otherFlagType: '1,2'
				},
				queryObjectInfo: {
					pageIndex: 1,
					pageSize: 10,
					modeCode: '',
					typeCode: [],
					difficulty: ''
				},
				questionType: 'object',
				//方向
				treeExpClassify: [],
				direct: [],
				hideLoadMore: false, //是否隐藏加载更多按钮
				selectQuestionName: '',
				filterSelectQuestion: function(list) {
					let showList = list; //.filter(ques => ques.description);
					if(this.selectQuestionName) {
						return showList.filter(ques => (ques.description || ques.name).indexOf(this.selectQuestionName) != -1)
					} else {
						return showList
					}
				},
				copySelectQuestionList:[]
			}
		},
		computed: {
//			totalScore(){
//				let scoreList = this.selectQuestionList.map(question => question.score)
//				let totalScore = scoreList.reduce((count, v) => count + v, 0);
//				return totalScore;
//			}
		},
		watch: {
			showQuestionList(list) {
				let questionList = this.copySelectQuestionList
				let listLength = list.length || 0
				let questionListLength = questionList.length || 0
				if (listLength && questionListLength) {
					for(let i = 0; i < listLength; i++) {
						for (let j = 0; j < questionListLength; j ++) {
							if (list[i].id === questionList[j].id) {
								list[i]['_checked'] = true
								break
							}
						}
					}
				}
			},
			// 存在提交报告的题目时，需要提示父组件禁止修改“自测”属性，反之通知允许修改
			copySelectQuestionList(list) {
				this.$emit('change-type', list.some(item => item.flagType === '3'))
				this.$emit('has-evn', list.some(item => item.needEnv === 1))
			},
			isSelfTest() {
				this.query.pageIndex = 1;
				this.queryCtfInfo = {
					category: '',
					needEnv: this.isAdvancedExam === 'true' ? '' : 'false',
					flagType: '0',
					otherFlagType: '1,2'
				}
				if (['ctf', 'ctf1'].includes(this.questionType)) {
					this.queryCtfList()
				}else {
          this.queryObjectList()
        }
			},
			isAdvancedExam() {
				this.query.pageIndex = 1;
				this.queryCtfInfo = {
					category: '',
					needEnv: this.isAdvancedExam === 'true' ? '' : 'false',
					flagType: '0',
					otherFlagType: '1,2'
				}
				if (['ctf', 'ctf1'].includes(this.questionType)) {
					this.queryCtfList()
				}
			},
			'selectQuestionList':function(val) {
				this.getTotalScore();
			},
			'paperVisibility': function(val) {
				this.showQuestionList.forEach(ques => {
					this.$set(ques, '_disabled', this.getDisabledStatus(ques))
				})
				if(val === 'share' && !this.$route.id) {
					this.copySelectQuestionList.forEach((question, index) => {
						if(question.visibility == 'private') {
							this.removeQuestion(question, index)
						}
					})
				}
			}
		},
		created() {

		},
		mounted() {
			this.getQuestionType();//查询主观题类型
			this.getAllPoint(); //查询客观题知识点
			this.queryObjectList(); //查询客观题列表
			this.copySelectQuestionList = [...this.selectQuestionList];
			this.getTotalScore();
		},
		beforeRouteLeave(to, from, next) {

		},
		methods: {
			// 获取题目类型
			getQuestionType() {
				experType('questionType').then(({
					code,
					message,
					attribute = []
				}) => {
					if(code !== 1) {
						this.$Message.warning(message)
					} else {
						this.questionTypeList = ((attribute.attribute[0] || {}).dictEntryList || []).map(item => {
							return {
								dictname: unescape(item.dictname)
							}
						})
					}
				}).catch(() => {
					this.$Message.error('获取题目类型异常')
				})
			},
			getAllPoint() { //获取所有方向
				experType().then(res => {
					if(res.code == 1) {
						let attribute = res.attribute.attribute;
						this.direct = attribute[0].dictEntryList
						let treeExpClassify = {};
						attribute[0].dictEntryList.forEach(dict => {
							if (dict.parentid) { //二级
								if (!treeExpClassify[dict.parentid]) return;
								treeExpClassify[dict.parentid].children.push({
									value: dict.dictid,
									label: dict.dictname
								})
							} else if(!treeExpClassify[dict.dictid] && !dict.parentid) { //一级
								treeExpClassify[dict.dictid] = {
									value: dict.dictid,
									label: dict.dictname,
									children: []
								}
							}
						})
						this.treeExpClassify = Object.values(treeExpClassify);
					}
				})
			},
			queryObjectiveAnswerList(item) { //整理答案
				let answ = this.sortQuestionAnswer(item.answers)
				this.$set(item, 'answers', answ);
				// if(item.modeCode === '3') {
				// 	this.$set(item, 'answers', this.generateTorFQuestionsAnswer(item));
				// }
			},
			queryQuestionInfo(question) { //查询题目详情
				let score = JSON.parse(JSON.stringify(question.score));
				question.score = score;
				question.modeCode = this.transferPapertypeToQuestionModeCode(question.questionType);
			},
			loadMore() { //点击加载更多的回调
				if(this.questionType == 'object') {
					this.queryObjectInfo.pageIndex++;
					this.queryObjectList();
				} else {
					this.query.pageIndex++;
					this.queryCtfList();
				}
			},
			changeNeedEnv(val) {
				this.query.pageIndex = 1;
				this.queryCtfInfo.flagType = '0'
				this.queryCtfInfo.otherFlagType = '1,2'
				this.queryCtfList()
			},
			queryQuestionList(type) { //切换主观客观题
				this.query = {
					pageIndex: 1,
					pageSize: 10,
				}
				this.queryCtfInfo = {
					category: '',
					needEnv: this.isAdvancedExam === 'true' ? '' : 'false',
					flagType: '0',
					otherFlagType: '1,2'
				};
				this.queryObjectInfo = {
					pageIndex: 1,
					pageSize: 10,
					modeCode: '',
					typeCode: '',
					difficulty: ''
				};
				this.showQuestionList = [];
				if (type === 'ctf') {
					this.queryCtfInfo.needEnv = this.isAdvancedExam === 'true' ? '' : 'false'
					this.queryCtfInfo.flagType = '0'
					this.queryCtfInfo.otherFlagType = '1,2'
				} else {
					this.queryCtfInfo.needEnv = this.isAdvancedExam === 'true' ? '' : 'false'
				}
				if(type == 'object') { //查询客观题
					this.queryObjectList();
				} else {
					this.queryCtfList();
				}
			},
			getTotalScore(){
				this.totalScore = 0;
				let scoreList = this.copySelectQuestionList.map(question => question.score)
				this.totalScore = scoreList.reduce((count, v) => count + v, 0);
			},
			selectQuestion(status, item) { //单个添加选择问题
				if(this.copySelectQuestionList.length > 100) {
					this.$Message.warning('已达题目添加上限100');
					return;
				}
				if(status) {
					this.copySelectQuestionList.push(item);
				} else {
					let index = this.copySelectQuestionList.findIndex(question => question.id == item.id)
					this.copySelectQuestionList.splice(index, 1);
				}
				this.getTotalScore();
				this.$emit('on-change',this.copySelectQuestionList,this.totalScore)
			},
			removeQuestion(ques, index) { //删除已选题目
				this.copySelectQuestionList.splice(index, 1);
				let question = this.showQuestionList.find(question => question.id == ques.id);
				if(question) {
					this.$set(question, '_checked', false);
				}
				this.getTotalScore();
				this.$emit('on-change',this.copySelectQuestionList,this.totalScore)
			},
			upQuestion(ques, index, type) { //上移
				if(index == 0) {
					return;
				}
				let arr = this.copySelectQuestionList; //this.copySelectQuestionList;
				arr.splice(index, 1, ...arr.splice(index - 1, 1, arr[index]))
				this.$emit('on-change',this.copySelectQuestionList,this.totalScore)
			},
			downQuestion(ques, index, type) { //下移
				if(index == this.copySelectQuestionList.length - 1) {
					return;
				}
				let arr = this.copySelectQuestionList;
				arr.splice(index + 1, 1, ...arr.splice(index, 1, arr[index + 1]))
				this.$emit('on-change',this.copySelectQuestionList,this.totalScore)
			},
			changeScore: debounce(function(score, question) { //单个添加改变分数
				let selectQuestion = this.copySelectQuestionList.find(ques => ques.id == question.id);
				score = score ? (score < 1 ? 1 : score > 1000 ? 1000 : score) : 1;
				if(selectQuestion) {
					this.$set(selectQuestion, 'score', score ? (score < 1 ? 1 : score > 1000 ? 1000 : score) : 1);
				}
				this.getTotalScore();
				this.$emit('on-change',this.copySelectQuestionList,this.totalScore)
			}, 500),
			queryObjectList() { //查询客观题列表-分页
				if(this.queryObjectInfo.pageIndex == 1) { //如果查的是第一页
					this.showQuestionList = [];
				}
				let params = JSON.parse(JSON.stringify(this.queryObjectInfo))
				if(params.typeCode && params.typeCode.length) {
					params.typeCode = params.typeCode[params.typeCode.length - 1];
				} else {
					params.typeCode = ''
				}
        console.log('----queryQuestionList----this.isSelfTest---',this.isSelfTest)
        // 0 考试和竞赛，1 练习  ，2 通用；默认 0
        // 1练习、2通用可以用于自测
        // 0考试和竞赛、2通用了可以用于考试
        params.applicationList = this.isSelfTest?[1,2]:[0,2] // story-view-2565
				queryObjectiveListNoGEQuesPage(params).then(data => { //查询客观试题列表
					if(data.code == 1) {
						let objectQuestionList = data.data.items || data.data;
						objectQuestionList.forEach(item => {
							this.$set(item, '_disabled', this.getDisabledStatus(item))
							if(!item.name) {
								this.$set(item, 'name', item.description);
							}
							if(item.modeCode == 4) {
								this.$set(item, 'description', item.explanation);
							}
							this.$set(item, 'score', 10);
							this.queryObjectiveAnswerList(item) //新接口查询回来的数据已经包含答案不需要再查询答案,此为整理数据的回调
							if(this.selectQuestionList.filter(question => question.id == item.id).length > 0) {
								this.$set(item, '_checked', true);
								this.$set(item, 'score', this.selectQuestionList.filter(question => question.id == item.id)[0].score);
							} else {
								this.$set(item, '_checked', false);
							}
							item.answers.forEach((subAnswer, index) => {
								if(subAnswer.description.indexOf('】') == 2 || subAnswer.description.indexOf(']') == 2) {
								subAnswer.description = subAnswer.description.slice(3);
								}
								if ([1, 2].includes(item.modeCode)) {
								subAnswer.description = `[${this.noFilter(index)}]${subAnswer.description}`
								}
							})
						})
						this.showQuestionList = this.showQuestionList.concat(objectQuestionList);
						console.log(this.showQuestionList,'this.showQuestionListthis.showQuestionList');
						this.totalCount = data.data.total;
					} else {
						this.$Message.warning(data.message);
					}
				})
			},
			noFilter(val) {
        let num = val + 1
				let str;
				switch(num) {
					case 1:
						str = 'A';
						break;
					case 2:
						str = 'B';
						break;
					case 3:
						str = 'C';
						break;
					case 4:
						str = 'D';
						break;
					case 5:
						str = 'E';
						break;
					case 6:
						str = 'F';
						break;
					case 7:
						str = 'G';
						break;
					case 8:
						str = 'H';
						break;
					case 9:
						str = 'I';
						break;
					case 10:
						str = 'J';
						break;
					case 11:
						str = 'K';
						break;
					case 12:
						str = 'L';
						break;
					default:
						str = '';
						break;
				}
				return str;
			},
			changeCascader(value) {
				this.queryObjectInfo.pageIndex = 1
				this.queryObjectInfo.typeCode = value
				this.queryObjectList();
			},
			queryCtfList() { //ctf-分页
				if(this.query.pageIndex == 1) { //如果查的是第一页
					this.showQuestionList = [];
				}
				let param = {}
				if (this.questionType === 'ctf') {
					param = Object.assign({}, this.queryCtfInfo)
				} else {
					param = {
						matchMode: '3',
						category: this.queryCtfInfo.category
					}
				}

        console.log('----queryQuestionList----this.isSelfTest---',this.isSelfTest)
        // 0 考试和竞赛，1 练习  ，2 通用；默认 0 

        // 1练习、2通用可以用于自测
        //
        // 0考试和竞赛、2通用了可以用于考试
        param.applicationList = this.isSelfTest?[1,2]:[0,2]// story-view-2565
        
				queryCtfList(param, this.query, true).then(data => {
					if(data.code == 1) {
						let ctfQuestionList = data.data.items || data.data;
						ctfQuestionList.forEach(item => {
							if (!item.flagTxt) { // flagTxt字段没有值，需要重新设值
								let list = (item.answers && item.answers.map(item => item.flag)) || []
								item.flagTxt = list.length ? list.join(', ') : ''
							}
						}) 
						this.showQuestionList = this.showQuestionList.concat(ctfQuestionList);
						this.totalCount = data.data.total;
						ctfQuestionList.forEach(item => {
							this.$set(item, '_disabled', this.getDisabledStatus(item))
							this.$set(item, 'score', item.score);
							this.$set(item, 'modeCode', '6');
							if(this.selectQuestionList.filter(question => question.id == item.id).length > 0) {
								this.$set(item, '_checked', true);
								this.$set(item, 'score', this.selectQuestionList.filter(question => question.id == item.id)[0].score);
							} else {
								this.$set(item, '_checked', false);
							}
						})
					} else {                         
						this.$Message.warning(data.message);
					}
				})
			},
			getDisabledStatus(question) {
				let isNotCommonCreator = this.paperCreator === question.creator;
				return(this.paperVisibility == 'share' || (!this.isOwn && isNotCommonCreator)) && question.visibility == 'private'
			},
			clearSelectQuestion() {
				this.copySelectQuestionList = [];
				this.totalScore = 0;
				this.showQuestionList.forEach(question => {
					this.$set(question, '_checked', false);
				}) 
			}
		}
	}
</script>
<style scoped>
	.paper-hand /deep .ivu-tooltip {
		padding: 0 5px;
	}
	.configClass {
		line-height: 32px;
		/*border: 1px solid #eee;*/
		border-top: none;
	}
	
	.configClass .ivu-btn-default {
		border-color: #999;
		color: #999;
	}
	
	ul {
		list-style: none;
	}
	
	.preQuestion h4,
	.preQuestion p {
		word-break: break-all;
	}
	
	.more {
		width: 140px;
		height: 40px;
		line-height: 40px;
		color: #fff;
		text-align: center;
		background: #bbb;
		margin: 10px auto;
		cursor: pointer;
	}
	
	.questionList .ivu-tag {
		padding: 0 4px;
	}
	
	.questionList .ivu-divider-horizontal {
		margin: 12px 0;
	}
	
	.questionList .ivu-checkbox+span,
	.ivu-checkbox-wrapper+span {
		margin-right: 0px;
	}
	
	#selQ .ivu-card-head .ivu-tag {
		margin: 0px;
	}
</style>
<style scoped>
	.pageWrap {
		margin: 30px;
		background: #fff;
		height: calc(100vh - 111px);
		min-height: 620px;
		border-radius: 10px;
	}
	
	.pageHeader {
		padding: 20px 20px 0 20px;
	}
	
	.pageHeader .title {
		float: left;
		font-size: 18px;
	}
	
	.fixedHeightTable {
		margin: 20px 20px 0 20px;
	}
</style>
<style>
	/*.ivu-table-body{
        max-height :calc(100vh - 228px);
        overflow:hidden auto;
    }*/
	
	#testPaper .fixedHeightTable .ivu-table-body {
		max-height: calc(100vh - 345px);
		overflow: hidden auto;
		overscroll-behavior: contain;
	}
	
	#allQ.ivu-card {
		border-radius: 10px 0 0 10px;
	}
	
	#selQ.ivu-card {
		border-radius: 0 10px 10px 0;
	}
	
	#allQ .ivu-card-head {
		background: var(--card-body-bgcolor);
		border-radius: 10px 0 0 0;
		height: 50px;
	}
	
	#selQ .ivu-card-head {
		background: var(--card-body-bgcolor);
		border-radius: 0 10px 0 0;
		height: 50px;
	}
	
	#allQ .ivu-card-body,
	#selQ .ivu-card-body {
		height: calc(100vh - 380px);
		overflow-y: auto;
		word-break: break-all;
	}
	
	#selQ .ivu-card-body {
		border-radius: 0 0 0 10px;
	}
	
	#allQ .ivu-card-body {
		/*background: rgb(243, 246, 251);*/
		border-radius: 0 0 10px 0;
	}
	
	#selQ .ivu-tooltip-arrow {
		border-bottom-color: #bfbfbf;
	}
	
	#selQ .ivu-tooltip-inner {
		padding: 4px 6px;
		background-color: #bfbfbf;
		min-height: auto;
		cursor: pointer;
	}
	
	.up {
		display: inline-block;
		width: 15px;
		height: 15px;
		vertical-align: middle;
		background: url("../../../../assets/testPaper/up.png") no-repeat;
	}
	
	.up:hover {
		background: url("../../../../assets/testPaper/up_check.png") no-repeat;
	}
	
	.down {
		display: inline-block;
		width: 15px;
		height: 15px;
		vertical-align: middle;
		background: url("../../../../assets/testPaper/down.png") no-repeat;
	}
	
	.down:hover {
		background: url("../../../../assets/testPaper/down_check.png") no-repeat;
	}
	
	.remove {
		display: inline-block;
		width: 15px;
		height: 15px;
		vertical-align: middle;
		background: url("../../../../assets/testPaper/remove.png") no-repeat;
	}
	
	.remove:hover {
		background: url("../../../../assets/testPaper/remove_check.png") no-repeat;
	}
	
	.ivu-card-head .clear span {
		display: inline-block;
		width: 17px;
		height: 19px;
		margin-right: 5px;
		vertical-align: middle;
		cursor:pointer;
		background: url("../../../../assets/testPaper/clear.png") no-repeat;
	}
	
	.ivu-card-head .clear:hover {
		color: #2d8cf0;
	}
	
	.ivu-card-head .clear:hover span {
		background: url("../../../../assets/testPaper/clear_check.png") no-repeat;
	}
</style>